<!DOCTYPE html>
<html>
<head>
	<!-- Required meta tags-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- Color theme for statusbar -->
	<meta name="theme-color" content="#2196f3">
	<title>Swipeout (Swipeable List)</title>
	<link href="https://cdn.bootcss.com/framework7/2.3.1/css/framework7.min.css" rel="stylesheet" />
	<link href="css/icon-f7.css" rel="stylesheet" />
</head>
<body>
<!-- App root element -->
<div id="app">
	<!-- Statusbar overlay -->
	<div class="statusbar"></div>
	<!-- Your main view, should have "view-main" class -->
	<div class="view view-main">
		<!-- Initial Page, "data-name" contains page name -->
		<div data-name="home" class="page">
			<!-- Top Navbar -->
			<div class="navbar">
				<div class="navbar-inner">
					<div class="title">Swipeout (Swipeable List)</div>
				</div>
			</div>
			<!-- Scrollable page content -->
			<div class="page-content">
				<div class="list">
					<ul>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-media"><i class="icon icon-f7"></i>
								</div>
								<div class="item-inner">
									<div class="item-title">Swipe left on me please</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
							</div>
						</li>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-media"> <i class="icon icon-f7"></i>
								</div>
								<div class="item-inner">
									<div class="item-title">Swipe left on me too</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
							</div>
						</li>
						<li>
							<div class="item-content">
								<div class="item-media">
									<i class="icon icon-f7"></i>
								</div>
								<div class="item-inner">
									<div class="item-title">I am not removable</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="list">
					<ul>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-inner">
									<div class="item-title">Swipe left on me please</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" class="swipeout-delete">Delete</a>
							</div>
						</li>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-inner">
									<div class="item-title">Swipe left on me too</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" class="swipeout-delete">Delete</a>
							</div>
						</li>
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title">I am not removable</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="list">
					<ul>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-media">
									<i class="icon icon-f7"></i>
								</div>
								<div class="item-inner">
									<div class="item-title">Swipe left on me please</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" class="open-more-actions">More</a>
								<a href="#" class="swipeout-delete">Delete</a>
							</div>
						</li>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-media">
									<i class="icon icon-f7"></i>
								</div>
								<div class="item-inner">
									<div class="item-title">Swipe left on me too</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" class="open-more-actions">More</a>
								<a href="#" class="swipeout-delete">Delete</a>
							</div>
						</li>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-media">
									<i class="icon icon-f7"></i>
								</div>
								<div class="item-inner">
									<div class="item-title">You can't delete me</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" class="open-more-actions">More</a>
							</div>
						</li>
					</ul>
				</div>
				<div class="list">
					<ul>
						<li class="swipeout deleted-callback">
							<div class="item-content swipeout-content">
								<div class="item-inner">
									<div class="item-title">Swipe left on me please</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" class="swipeout-delete">Delete</a>
							</div>
						</li>
						<li class="swipeout deleted-callback">
							<div class="item-content swipeout-content">
								<div class="item-inner">
									<div class="item-title">Swipe left on me too</div>
								</div>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" class="swipeout-delete">Delete</a>
							</div>
						</li>
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title">I am not removable</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="list">
					<ul>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-media">
									<i class="icon icon-f7"></i>
								</div>
								<div class="item-inner">
									<div class="item-title">Swipe right on me please</div>
								</div>
							</div>
							<div class="swipeout-actions-left">
								<a href="#" class="color-green alert-reply">Reply</a>
								<a href="#" class="color-blue alert-forward">Forward</a>
							</div>
						</li>
						<li class="swipeout">
							<div class="item-content swipeout-content">
								<div class="item-media">
									<i class="icon icon-f7"></i>
								</div>
								<div class="item-inner">
									<div class="item-title">Swipe right on me too</div>
								</div>
							</div>
							<div class="swipeout-actions-left">
								<a href="#" class="color-green alert-reply">Reply</a>
								<a href="#" class="color-blue alert-forward">Forward</a>
							</div>
						</li>
					</ul>
				</div>
				<div class="list media-list">
					<ul>
						<li class="swipeout">
							<div class="swipeout-content">
								<a href="#" class="item-link item-content">
									<div class="item-inner">
										<div class="item-title-row">
											<div class="item-title">Facebook</div>
											<div class="item-after">17:14</div>
										</div>
										<div class="item-subtitle">New messages from John Doe</div>
										<div class="item-text">
											Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
										</div>
									</div>
								</a>
							</div>
							<div class="swipeout-actions-left">
								<a href="#" class="color-green swipeout-overswipe alert-reply">Reply</a>
								<a href="#" class="color-blue alert-forward">Forward</a>
							</div>
							<div class="swipeout-actions-right">
								<a href="#" class="open-more-actions">More</a>
								<a href="#" class="color-orange alert-mark">Mark</a>
								<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="https://cdn.bootcss.com/framework7/2.3.1/js/framework7.min.js"></script>
<script type="text/javascript" src="js/swipeout.js"></script>
</body>
</html>